//1. 导入 lazy 懒  Suspense 悬念
import {lazy, Suspense} from 'react'

import About from "../components/12-router/About/About";
import News from "../components/12-router/News/News";
import Message from "../components/12-router/Message/Message";
import NotFound from "../components/12-router/NotFound/NotFound";
import { Navigate } from "react-router-dom";
import Hero from "../components/10-组件通信/3-pubsub/Hero";
import HeroDetail from "../pages/HeroDetail/HeroDetail";
import YYG from "../components/13-QQMusic/YYG/YYG";
// import MineMusic from "../components/13-QQMusic/MineMusic/MineMusic";
const Home = lazy(() => import("../components/13-QQMusic/Home/Home"));
const Singer = lazy(() => import('../components/13-QQMusic/MineMusic/MineMusic'))
//2. 调用 lazy 函数. 接受函数类型的参数, 内部需要返回 import 导入的模块
const MineMusic = lazy(() => {
  return import('../components/13-QQMusic/MineMusic/MineMusic');
})

let load = (Com) => {
  return <Suspense fallback={<div>正在加载中...</div>}>
          <Com />
        </Suspense>
}

let arr = [
  {
    path: "/home",
    caseSensitive: true,//区分大小写
    element: <Home />,
    children: [
      {
        path: '/home/message',
        element: <Message  />
      },
      {
        path: '/home/news',
        element: <News  />
      },
      {
        index: true,
        element: <Navigate to="/home/message" />
      }
    ]
  },
  {
    path: "/about",
    caseSensitive: true,//区分大小写
    element: <About />,
  },
  {
    path: "/heros",
    element: <Hero  />
  },
  {
    path: "/hero",  
    element: <HeroDetail  />
  },
  {
    path: '*',
    element: <NotFound  />
  },
  {
    path: '/music',
    element: <YYG  />,
    children: [
      {
        path: '/music/home',
        element: load(Home)
      },
      {
        path: '/music/singer',
        element: load(Singer)
      }
    ]
  }, 
  {
    path: '/mine-music',
    // 3. 使用 Suspense 包裹 MineMusic
    element: load(MineMusic)
  }
];

export default arr;